<template>

  <el-affix :offset="0">
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> {{ article.articleTitle }} </span>
      </template>
    </el-page-header>
  </el-affix>
  <div class="common-layout">
    <el-container style="height: 100%; width: 75%">


      <!--文章标题及作者信息-->
      <el-header class="el-header">
        <div style="position: absolute;width: 30%">
          <span style="font-size: large;color: #bfbfbf">作者:</span>
          <el-avatar
              :src="author.avatar"
              size="large"
          />
          <span style="color: #25a4bb;font-size: larger">
            {{ author.nickName }}
          </span>
        </div>
      </el-header>
      <el-main style="height: 100%">
        <el-card class="box-card" >
          <template #header>
            <div class="card-header">
              <span>标题：{{ article.articleTitle }}</span><br>
              <span style="font-size: larger">发布时间:{{ article.createTime }}</span>
            </div>
          </template>
          <div class="img">
            <el-image :src="article.articleCover" fit="cover" style="width:600px;height:400px"/>
          </div>

<!--文章内容-->
          <div style="margin-bottom: 40px">
            <v-md-editor v-model="article.articleContent" mode="preview"></v-md-editor>
          </div>
          <div v-if="store.getters.GET_TOKEN!=null">
            <el-input
                v-model="comment.commentContent"
                :rows="4"
                type="textarea"
                placeholder="请写出你的评论"
                @keyup.enter="submit"
            />
            <el-button type="primary" @click="submit" style="margin-bottom: 60px">提交评论</el-button>
          </div>
          <!--评论-->
          <div class="comment-card" v-if="user!=null" v-for="c in comments">
            <el-card shadow="hover"  v-if="c.comment.parentId==null">
              <template #header>
                <div class="card-header">
                  <span>
                    <el-avatar :src="c.avatar">
                    </el-avatar>
                    {{ c.nickName }}
                  </span>
                  <span>{{ c.comment.createTime }}</span>
                </div>
              </template>
              <div>
              <span style="color: #25a4bb;font-size: larger;">
                {{ c.comment.commentContent }}
              </span>
              </div>
              <div
                  v-if="comment.userId==c.comment.userId||store.getters.GET_ROOT=='root'"
                  style="width: 18%;margin-left:650px"
              >
                <el-popconfirm
                    confirm-button-text="撤回"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#626AEF"
                    title="确定要撤回吗？"
                    @confirm="deleteComment(c.comment.id)"
                    @cancel="cancelEvent"
                >
                  <template #reference>
                    <el-link type="warning" @click="">撤回</el-link>
                  </template>
                </el-popconfirm>
              </div>
              <!--回复-->

              <el-link
                  v-if="al!=c.comment.id&&c.size!=0"
                  type="primary"
                  style="margin-left:0px;margin-top: 20px;margin-bottom: 20px"
                  @click="getReply(c.comment.id),al=c.comment.id"
                  v-cloak
              >
                <span style="color: #b0b0b0" v-if="c.size!=0" v-cloak>共{{c.size}}条回复,</span>
                点击查看
                <svg-icon style="font-size: 20px" icon="地区下拉箭头"></svg-icon>
              </el-link>
              <el-link
                  v-else-if="al==c.comment.id&&cl!=0"
                  type="primary"
                  style="margin-left:0px;margin-top: 20px;margin-bottom: 20px"
                  @click="al=0,cl=0"
                  v-cloak
              >
                收起
                <svg-icon style="font-size: 20px" icon="收起"></svg-icon>
              </el-link>

              <div
                  v-for="r in replys"
                  style=
                      "
                      width: 70%;
                      min-height: 20px;
                      margin-left: 20%;
                      margin-bottom: 20px;
                      background-color: beige;
                      "
                  v-if="cl == c.comment.id"
                  v-cloak
              >
                <el-space alignment="flex-end" spacer="|">
                  <el-avatar :src="r.avatar"/>
                  <span style="margin-top: 0">
                  {{ r.nickName }}
                </span>
                  <span>
                  {{ r.comment.createTime }}
                  </span>
                </el-space>
                <br>
                <hr style="margin-bottom: 20px">
                <span v-cloak v-if="r.comment.replyUserId == null" style="margin-top: 10px">
                 {{ r.comment.commentContent }}
                </span>
                <span v-cloak v-else style="margin-top: 10px">
                 <span style="color: firebrick">@{{r.replyNickName}}:</span>{{ r.comment.commentContent }}
                </span>
                <div
                    v-if="comment.userId==r.comment.userId||store.getters.GET_ROOT=='root'"
                    style="width: 40%;margin-left:400px"
                    v-cloak
                >
                  <el-popconfirm
                      confirm-button-text="撤回"
                      cancel-button-text="取消"
                      :icon="InfoFilled"
                      icon-color="#626AEF"
                      title="确定要撤回这条回复吗？"
                      @confirm="deleteComment1(r.comment.id,c.comment.id)"
                      @cancel="cancelEvent"
                  >
                    <template #reference>
                      <el-link type="error" @click="">撤回</el-link>
                    </template>
                  </el-popconfirm>
                </div>
                <br>
                <el-link
                    v-if="dl!=r.comment.id"
                    type="primary"
                    style="margin-left:500px;margin-top: 20px;margin-bottom: 20px"
                    @click="dl=r.comment.id"
                    v-cloak
                >
                  回复
                </el-link>
                <el-link
                    v-else
                    type="primary"
                    style="margin-left: 500px;margin-top: 20px;margin-bottom: 20px"
                    @click="dl=0,reply.commentContent=''"
                    v-cloak
                >
                  取消
                </el-link>
                <div v-if="dl == r.comment.id" v-cloak>
                  <el-input
                      v-model="reply.commentContent"
                      :rows="2"
                      type="textarea"
                      placeholder="请写出你的回复"
                  />
                  <el-button
                      type="primary"
                      @click="reply.replyUserId = r.comment.id ,
                      submitt(c.comment.id)"
                      style="margin-bottom: 20px"
                  >
                    回复
                  </el-button>
                </div>
              </div>
              <el-link
                  v-if="bl!=c.comment.id"
                  type="primary"
                  style="float: right;margin-right: 30px;margin-top: 20px;margin-bottom: 20px"
                  @click="bl=c.comment.id"
                  v-cloak
              >
                回复
              </el-link>
              <el-link
                  v-else
                  type="primary"
                  style="margin-left: 750px;margin-top: 20px;margin-bottom: 20px"
                  @click="bl=0"
                  v-cloak
              >
                取消
              </el-link>
              <div v-if="bl == c.comment.id" v-cloak>
                <el-input
                    v-model="reply.commentContent"
                    :rows="2"
                    type="textarea"
                    placeholder="请写出你的回复"
                    @keyup.enter="submitt(c.comment.id)"
                />
                <el-button type="primary" @click="submitt(c.comment.id),al=c.comment.id" style="margin-bottom: 20px">回复</el-button>
              </div>

            </el-card>
          </div>
          <div v-else>
            <el-button :plain="true" type="primary" @click="open('请先登录')">在此处评论</el-button>
          </div>
        </el-card>

      </el-main>
    </el-container>

  </div>
</template>


<script setup>
import {h, toRaw, defineComponent} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'
import {onMounted, onUpdated, onBeforeMount, ref, reactive, inject} from "vue-demi";
import request from "@/utils/request";
import router from "@/router";
import store from "@/store";

const al = ref(0)
const bl = ref(0)
const cl = ref(0)
const dl = ref(0)
const route = useRoute()
const reload = inject("reload")
let articleId = ref(0)
let userId = ref(2)
let author = ref({})
let article = ref({})
articleId = route.query.articleId
userId = route.query.userId
const comment = reactive({
  commentContent: "",
  userId: "",
  topicId: "",
})
const reply = reactive({
  commentContent: "",
  userId: "",
  topicId: "",
  parentId: null,
  replyUserId: null
})
let user = ref()


comment.topicId = articleId
reply.topicId = articleId
let comments = ref([])
let replys = ref([])
onMounted(async () => {
  //获取评论的用户信息
  let result0 = await request.get("user/getuser")
  let data0 = result0.data
  if (data0.code == 200) {
    console.log(data0.code + " " + data0.msg)
    user.value = data0.data.id
    console.log(user)
  } else {
    console.log(data0.code + " " + data0.msg)
  }

  comment.userId = user.value
  reply.userId = user.value
  //获取文章作者信息
  let result = await request.get("article/getauthor?userId=" + userId)
  let data = result.data
  if (data.code === 200) {
    author.value = data.data
  } else {
    console.log(data.code + "  " + data.msg)
  }
  //获取文章信息
  let result1 = await request.get("article/getarticle?articleId=" + articleId)
  let data1 = result1.data
  if (data1.code === 200) {
    article.value = data1.data
    console.log(data1.code + " " + data1.msg)
  } else {
    console.log(data1.code + " " + data1.msg)
  }
  //文章添加路由
  if (article.value.originalUrl != toRaw(router).currentRoute.value.fullPath) {
    article.value.originalUrl = toRaw(router).currentRoute.value.fullPath
    let result = await request.post("article/addurl", article.value)
    let data = result.data
    if (data.code == 200) {
      console.log(data.msg)
    } else {
      console.log(data.msg)
    }
  }

  await getComment();
})
//根据文章Id获取评论信息
const getComment = async () => {

  let result2 = await request.get("comment/getcomment", comment)
  let data2 = result2.data
  if (data2.code === 200) {
    comments.value = data2.data
    console.log(data2.code + " " + data2.msg)
  } else {
    console.log(data2.code + " " + data2.msg)
    comments.value = null
  }
}
//提交评论
const submit = async () => {
  let result = await request.post("comment/addcomment", comment)
  let data = result.data
  if (data.code === 200) {
    open1(data.msg)
    comment.commentContent = ""
    await getComment();
  } else {
    open(data.msg)
  }
}
const submitt = async (relyId) => {
  reply.parentId = relyId
  let result = await request.post("comment/addcomment", reply)
  let data = result.data
  if (data.code === 200) {
    open1(data.msg)
    reply.commentContent = ""
    bl.value = 0
    await getReply(relyId)
    dl.value= 0
    await getComment();
  } else {
    open(data.msg)
  }
}
//跳转回首页
let current = route.query.current
const goBack = () => {
  router.push({name: "home", query: {current: current}})
}
//提示信息
const open = (msg) => {
  ElMessage({
    message: msg,
    type: 'warning',
  })
}
const open1 = (msg) => {
  ElMessage({
    message: msg,
    type: 'success',
  })
}
//删除评论操作
const deleteComment = async (id) => {
  let result = await request.get("comment/deletecomment?id=" + id)
  let data = result.data
  if (data.code === 200) {
    open1(data.msg)
    await getComment()
  } else {
    open(data.msg)
  }
}
const deleteComment1 = async (id,cid) => {
  let result = await request.get("comment/deletecomment?id=" + id)
  let data = result.data
  if (data.code === 200) {
    open1(data.msg)
    await getReply(cid)
    await getComment()
  } else {
    open(data.msg)
  }
}
const getReply = async (id) => {
  let result = await request.get("comment/getreplys?id=" + id)
  let data = result.data
  if (data.code === 200) {
    replys.value = data.data
    cl.value = id
    await getComment()
  } else {
    open(data.msg)
    cl.value = 0
  }
}
const cancelEvent = () => {
  open1("取消成功")
}
</script>

<style scoped>
.common-layout {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  align-items: center;
  padding: 10px;
}

.el-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  align-items: center;
  padding: 10px;
}

.img {
  width: 90%;
  height: 60%;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  align-items: center;
}

.box-card {
  width: 80%;
}
</style>